<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 版心1190px -->
    <!-- h=height w=width b=border -->
    <header>
        <!-- 顶部 -->
        <div id="top">
            <div class="clearfixed">
                <!-- h=30px -->
                <span class="iconfont icon-dingwei">位置</span>
                <ul class="clearfixed">
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                    <li> <a href="#">四字占位</a></li>
                </ul>
            </div>
        </div>
        <!-- logo，搜索框 ，购物车，二维码-->
        <div id="head" class="clearfixed">
            <!-- h=140,b-botton=1px -->
            <div class="left">
                <!-- w,h = 190*120px -->
            </div>

            <div class="center clearfixed">
                <div class="searchAndCart clearfixed">
                    <div class="search clearfixed">
                        <!--搜索框 h=32px-->
                        <input type="text">
                        <a class="iconfont icon-xiangji"></a>
                        <button class="iconfont icon-sousuo"></button>
                    </div>
                    <!--购物车  h=36px-->
                    <div class="cart">
                        <span class="iconfont icon-gouwuchekong"></span>
                        <a href="#">我的购物车</a>
                    </div>

                </div>

                <!--热词 w,h = 550*20px-->
                <div class="hotword">
                    <a href="#">热词</a>
                    <a href="#">热词</a>
                    <a href="#">热词</a>
                    <a href="#">热词</a>
                    <a href="#">热词</a>
                    <a href="#">热词</a>
                </div>
                <!--导航 h=40px , padding-top=20px-->
                <ul class="nav clearfixed">
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                    <li>导航栏</li>
                </ul>

            </div>
            <div class="right">
                <!-- w,h = 190*120px -->

            </div>
        </div>
    </header>
    <main>
        <!-- 商品分类，轮播，展示位 -->
        <div id="bannerAndOther" class="clearfixed">
            <ul class="productType">
                <!-- w =190px ,line-h = 25px ,-->
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
                <li><a href="#">四字占位</a></li>
            </ul>
            <div class="banner">
                <!-- w,h = 590*470px -->
                <div class="swiper">
                    <!-- <img src="#" alt="轮播"> -->
                </div>
            </div>
            <div class="productShow">
                <a href=""><img src="../static/bannerSmall_1.jpg" alt=""> </a> <!-- w,h = 190*150px -->
                <a href=""><img src="../static/bannerSmall_2.jpg" alt=""> </a>
                <a href=""><img src="../static/bannerSmall_3.jpg" alt=""> </a>
            </div>
            <div class="other">
                <!-- w,h = 190*470px -->
                <div class="userData">
                    <div class="clearfixed">
                        <img src="../static/headerImg.png" class="headerImg"></img>
                        <div>
                            <a href="#">Hi~欢迎来到京东</a>
                            <div>
                                <a href="./Login.html" target="_blank">登录/注册</a>
                            </div>
                        </div>
                    </div>
                    <div class="user_profit">
                        <a href="#">四字占位</a>
                        <a href="#">四字占位</a>
                    </div>
                </div>
                <div class="news">
                    <div class="title clearfixed">
                        <span>京东快报</span>
                        <a href="#">更多</a>
                    </div>
                    <a href="#" class="concent"> <span>最新</span>四字占位四字占位四字占位</a>
                    <a href="#" class="concent"> <span>最新</span>四字占位四字占位四字占位</a>
                    <a href="#" class="concent"> <span>最新</span>四字占位四字占位四字占位</a>
                    <a href="#" class="concent"> <span>最新</span>四字占位四字占位四字占位</a>
                </div>
                <div class="service">
                    <!-- 第一行 -->
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <!-- 第二行 -->
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <!-- 第三行 -->
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <!-- 第四行 -->
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                    <a href="#">
                        <div class="iconfont icon-huafei"></div>
                        <span>占位</span>
                    </a>
                </div>

            </div>
        </div>

        <!-- 京东秒杀 -->
        <!-- h =260px -->
        <div id="spike" class="clearfixed">
            <a href="#"></a> <!-- w,h = 190*260px -->
            <a href="#">
                <img src="../static/spike_img1.jpg" alt=""> <!-- w,h = 140*140px -->
                <h6>四字占位</h6> <!-- h =18px -->
                <div>四字占位</div><!-- h =24px -->
            </a> <!-- w,h = 200*260px -->
            <a href="#">
                <img src="../static/spike_img2.jpg" alt=""> <!-- w,h = 140*140px -->
                <h6>四字占位 </h6> <!-- h =18px -->
                <div>四字占位</div><!-- h =24px -->
            </a>
            <a href="#">
                <img src="../static/spike_img3.jpg" alt=""> <!-- w,h = 140*140px -->
                <h6> 四字占位</h6> <!-- h =18px -->
                <div>四字占位</div><!-- h =24px -->
            </a>
            <a href="#">
                <img src="../static/spike_img4.jpg" alt=""> <!-- w,h = 140*140px -->
                <h6>四字占位 </h6> <!-- h =18px -->
                <div>四字占位</div><!-- h =24px -->
            </a>
            <a href="#"></a> <!-- w,h = 180*240px -->
        </div>

        <!-- 特色优选 ， h = 980px-->
        <div id="feature" class="clearfixed">
            <!-- w = 590px -->
            <div class="left">
                <!-- 550*60 -->
                <div class="title clearfixed">
                    <div class="title-left">
                        <span>每日特价</span>
                    </div>
                    <ul class="clearfixed">
                        <li><a href="#">占位</a> </li>
                        <li><a href="#">占位</a> </li>
                        <li><a href="#">占位</a> </li>
                        <li><a href="#">占位</a> </li>
                        <li><a href="#">占位</a> </li>
                    </ul>
                </div>
                <div class="productList clearfixed">
                    <div class="productList-left">
                        <img src="../static/productList-left.jpg" alt="">
                        <span>四字占位</span>
                        <span>价格</span>
                    </div>
                    <div class="productList-right clearfixed">
                        <div>
                            <img src="../static/productList-right1.png" alt="">
                            <span>四字占位四字占位</span>
                            <div>价格</div>
                        </div>
                        <div>
                            <img src="../static/productList-right2.jpg" alt="">
                            <span>四字占位四字占位</span>
                            <div>价格</div>
                        </div>
                        <div>
                            <img src="../static/productList-right3.jpg" alt="">
                            <span>四字占位四字占位</span>
                            <div>价格</div>
                        </div>
                        <div>
                            <img src="../static/productList-right4.jpg" alt="">
                            <span>四字占位四字占位</span>
                            <div>价格</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <div class="title-left">
                        <span>品牌闪购</span>
                    </div>
                </div>
            </div>
            <div class="scrollShow clearfixed">
                <a href="#" class="show">
                    <!-- w,h = 190*260px -->
                    <img src="#" alt="">
                </a>
                <div class="scroll">
                    <!-- w,h = 990*260px -->
                </div>
            </div>
        </div>

        <!-- 为你推荐 w=1200px-->
        <div id="forYou" class="clearfixed">
            <div class="forYou">为你推荐</div>
            <!-- w,h = 230*322px -->
            <div class="content"></div>
        </div>
        <div id="add"><button>加载更多</button></div>
        <!-- 更多服务 -->
        <ul id="service" class="clearfixed">
            <li> 品类齐全，轻松购物</li>
            <li> 品类齐全，轻松购物</li>
            <li> 品类齐全，轻松购物</li>
            <li> 品类齐全，轻松购物</li>
        </ul>
    </main>


    <footer>
        <!-- 帮助 -->
        <ul id="help" class="clearfixed">
            <li>购物指南
                <ul>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                </ul>
            </li>
            <li>购物指南
                <ul>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                </ul>
            </li>
            <li>购物指南
                <ul>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                </ul>
            </li>
            <li>购物指南
                <ul>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                </ul>
            </li>
            <li>购物指南
                <ul>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                    <li>
                        <a href="#">四字占位</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- 其他 -->
        <div id="other">
            <p>四字占位</p>
            <p>四字占位</p>
            <p>四字占位</p>
            <p>四字占位</p>
            <p>四字占位</p>
        </div>
    </footer>

    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>